<template>
  <div class="login-container">
     <video autoplay muted loop id="bgVideo">
      <source
        src="http://127.0.0.1:9001/static/media/videoBG.17363418b3c2246a0e27.mp4"
        type="video/mp4"
      />
    </video> 
    <!-- <img src="../assets/image.png"> -->
   

    <el-row type="flex" justify="center">
      <el-col :span="6" :offset="18">
        <el-form class="transparent-form">
          <el-form-item  style="text-align: center;">
            <p style="font-size: 20px">欢迎使用协和医院智慧管理系统</p>
          </el-form-item>
          <el-form-item>
            <el-input v-model="loginform.account" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input v-model="loginform.password" show-password placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="login" type="primary" style="width: 100%;">登录</el-button>
            <p>
              <span>忘记密码？</span>
              <router-link style="color: #409EFF; text-decoration: none;" to="/login">前往重置</router-link>
              <span style="margin-left: 280px;">我要</span>
              <router-link style="color: #409EFF; text-decoration: none; " to="/register">注册</router-link>
            </p>
          </el-form-item>
          <el-form-item>
            <el-select v-model="mysqlSchema" @change="selectDb">
              <el-option v-for="hospital in hospitals" :key="hospital.mysqlSchema" :value="hospital.mysqlSchema" :label="hospital.hospitalName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  data() {
    return {
      loginform: {
        account: "",
        password: "",
      },
      mysqlSchema:'',
      hospitals:[]
    };
  },
  methods: {
    login() {
      //发送登录请求
      //1.请求必须是post请求
      //2.账号的key默认username  密码的key默认password
      //3.后端获取请求的数据是从url后面拿的
      //4.登录的接口地址默认是/login,也可以指定
      let param = new URLSearchParams();
      param.append("username", this.loginform.account);
      param.append("password", this.loginform.password);

      this.$axios.post("api/dologin", param)
           .then(res => {
        console.log(res.data);
        if (res.data.code == 200) {
          //登录成功
          //1.保存token
          localStorage.setItem("thoken", res.data.data);
          //2.路由跳转首页
          this.$router.push("/Home");
        }if(res.data.code == 2000){
          this.$message.error("账号或者密码错误");
        }
      });
    },
    queryHospitals(){
      sessionStorage.clear()
      this.$axios.get("api/hospital/queryHospitalMetas")
           .then(res => {
            console.log(res.data.data)
            if(res.data.code==200){
              this.hospitals=res.data.data
            }
           })
    },
    selectDb(){
      console.log(this.mysqlSchema)
      sessionStorage.setItem("db",this.mysqlSchema)//存到session中
      this.$axios.get("api/hospital/changeDB/"+this.mysqlSchema+"")
      .then(res=>{
        if(res.data.code==200){
        }
      })
    }
  },
  mounted(){
    this.queryHospitals()
  }
};
</script>

<style scoped>
.login-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; 
  /* 设置层次 */
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; 
  /* 设置层次 */
}

.el-row {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.el-col {
  background: transparent;
  padding: 15% 20px;
  border-radius: 2px;
}

.el-input {
  margin: 8px 1px;
}

.transparent-form {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 20px;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px; /* 设置宽度 */
  height: 300px; /* 设置高度 */
}
</style>
